<template>
	<view class="content">
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<view class="body">
			<view class="head">
				<view class="head_bg">
					<image src="../../static/login/head_bg.png"></image>
				</view>
				<view class="logo">
					<image src="../../static/logo.png"></image>
					<view class="logo_title">精神障碍患者监护平台</view>
				</view>
			</view>
			<view class="center">
				<view class="login_register">
					<view class="login" :class="{ active: isLogin }" @tap="changeStatus('login')">登录</view>
					<view class="register" :class="{ active: isRegister }" @tap="changeStatus('register')">注册</view>
				</view>
			</view>
			<view class="login_body" v-if="isLogin">
				<view class="phone">
					<image src="../../static/login/phone-input.png" class="icon_phone"></image>
					<input type="text" v-model="username" class="input_box" placeholder="请输入用户名" />
					<view class="clearIcon" @tap="clearInput('phone')">
						<image src="../../static/login/delete.png" class="icon_del"></image>
					</view>
				</view>
				<view class="password">
					<image src="../../static/login/password.png" class="icon_password"></image>
					<input type="password" v-model="password" class="input_box" placeholder="请输入密码" />
					<view class="clearIcon" @tap="clearInput('password')">
						<image src="../../static/login/delete.png" class="icon_del"></image>
					</view>
				</view>
				<button type="default" class="login_btn" @tap="bindLogin()">登录</button>
			</view>
			<view class="register_body" v-if="isRegister">
				<view class="phone">
					<image src="../../static/login/phone-input.png" class="icon_phone"></image>
					<input type="text" v-model="usernameRegister" class="input_box" placeholder="请输入用户名" />
					<view class="clearIcon" @tap="clearInput('phoneRegister')">
						<image src="../../static/login/delete.png" class="icon_del"></image>
					</view>
				</view>

				<view class="password">
					<image src="../../static/login/phone-input.png" class="icon_phone"></image>
					<input type="number" v-model="phoneRegister" class="input_box" placeholder="请输入手机号" />
					<view class="clearIcon" @tap="clearInput('phoneRegister')">
						<image src="../../static/login/delete.png" class="icon_del"></image>
					</view>
				</view>

				<view class="password">
					<image src="../../static/login/password.png" class="icon_phone"></image>
					<input type="password" v-model="passwordRegister" class="input_box" placeholder="密码为6—10为数字和字母组合" />
					<image src="../../static/login/key.png" class="icon_key"></image>
				</view>
				<button type="default" class="register_btn" @tap="bindRegister()">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				password:'',
				usernameRegister: '',
				passwordRegister: '',
				phoneRegister: '',
				cerificationCode: '',
				isLogin: true,
				isRegister: false,
			};
		},
		onLoad() {},
		computed: {},
		created() {
			// this.bindLogin(); 
		},
		methods: {
			//切换登录注册状态
			changeStatus(status) {
				console.log('status:' + status);
				if (status == 'login') {
					this.isLogin = true;
					this.isRegister = false;
				} else if (status == 'register') {
					this.isRegister = true;
					this.isLogin = false;
				}
			},
			//清除输入
			clearInput(target) {
				console.log('target:' + target);
				if (target == 'phone') {
					this.phone = '';
				} else if (target == 'password') {
					this.password = '';
				} else if (target == 'phoneRegister') {
					this.phoneRegister = '';
				}
			},
			bindLogin() {
				var json = new Object();
				json.username = this.username;
				json.password = this.password;
				this.$http.uniHttpPost(this.$api.api_login.server_login, json)
					.then(res => {
						console.log("res: " + JSON.stringify(res));
						uni.setStorageSync('token', res.data.data);
						uni.switchTab({
							url: '../schedule_list/schedule_list'
						})
					})
					.catch(err => {
						console.log("err: " + JSON.stringify(err));
					})
			},
			bindRegister() {
				var json = new Object();
				json.username = this.usernameRegister;
				json.password = this.passwordRegister;
				json.phone = this.phoneRegister;

				this.$http.uniHttpPost(this.$api.api_login.server_register, json)
					.then(res => {
						console.log("res: " + JSON.stringify(res));
						uni.showToast({
							title: '注册成功',
							duration: 2000
						});
					})
					.catch(err => {
						console.log("err: " + JSON.stringify(err));
					})


			}
		}
	};
</script>

<style scoped>
	@import url('../../css/navigation.css');

	.head_bg image {
		width: 100%;
		height: 593.75upx;
	}

	.logo image {
		height: 100upx;
		width: 100upx;
	}

	.logo {
		position: absolute;
		top: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex-direction: column;
	}

	.logo_title {
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgb(249, 249, 249);
	}

	.center {
		display: flex;
		justify-content: center;
	}

	.login_register {
		background-color: rgba(0, 0, 0, 0.071);
		font-family: 'FZLTHJW';
		font-size: 25upx;
		width: 293.75upx;
		height: 52.08upx;
		border-radius: 26.04upx;
		display: flex;
		flex-direction: row;
		color: #29d1cb;
	}

	.login {
		flex: 1;
		height: 52.08upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.active {
		background-color: #29d1cb;
		border-radius: 26.04upx;
		width: 159.02upx;
		color: rgb(255, 255, 255);
	}

	.register {
		flex: 1;
		height: 52.08upx;
		border-radius: 26.04upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login_body,
	.register_body {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 62.5upx;
		font-size: 25upx;
		font-family: 'FZLTHJW';
	}

	.phone,
	.password,
	.cerification_code {
		width: 587.5upx;
		height: 64.58upx;
		border: 1.38upx solid #40bbba;
		border-radius: 13.88upx;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.password,
	.cerification_code {
		margin-top: 45.83upx;
	}

	.icon_phone {
		margin-left: 44.44upx;
		width: 22.22upx;
		height: 34.02upx;
	}

	.icon_password {
		margin-left: 44.44upx;
		width: 25upx;
		height: 31.25upx;
	}

	.input_box {
		margin-left: 31.25upx;
		color: rgb(64, 187, 186);
		flex: 1;
	}

	.icon_del {
		width: 22.22upx;
		height: 22.22upx;
		margin: 0 24.3upx;
	}

	.get_code {
		margin: 0 24.3upx;
		color: #40bbba;
	}

	.login_btn,
	.register_btn {
		margin-top: 45.83upx;
		border-radius: 13.88upx;
		background-color: rgb(41, 209, 203);
		box-shadow: 1.08upx 6.15upx 31.94upx 0px rgba(64, 187, 186, 0.64);
		width: 587.5upx;
		height: 64.58upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgb(255, 255, 255);
	}

	.icon_key {
		width: 25upx;
		height: 15.97upx;
		margin: 0 24.3upx;
	}

	.clearIcon {
		height: 100%;
		display: flex;
		align-items: center;
	}
</style>
